<template>
  <div>
    <h1>欢迎光临小熊水果店</h1>
    <div class="all">
      <div class="goods">
        <h3>特惠水果</h3>
        <p v-for="(item, index) in goods" :key="index">
          <strong>{{ item.fruits }}：</strong>
          <i>{{ item.price }} 元/斤</i> <br />
          <em>{{ item.dis * 10 }}折优惠</em>
        </p>
      </div>
      <div class="right">
        <div class="weight">
          重量: <input v-model.number="weight" type="number" value="" />
        </div>
        <div class="count">
          <button @click="fn">计算</button>
        </div>
        <div class="allPrice">
          总价: <span>{{ allPrice }}元</span> <br />
          折后价: <span>{{ discount }}元</span> <br />
          优惠: <span>{{ reduce }}元</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      goods: [{ fruits: "橘子", price: 9.8, dis: 0.8 }],
      weight: 0,
      allPrice: 0,
      discount: 0,
      reduce: 0,
    };
  },
  methods: {
    fn() {
      console.log(666);
      this.allPrice = (this.goods[0].price * this.weight).toFixed(2);
      this.discount = (this.goods[0].dis * this.allPrice).toFixed(2);
      this.reduce = (this.allPrice - this.discount).toFixed(2);
    },
  },
};
</script>

<style lang="less">
body {
  margin: 100px auto;
  color: #fff;
  h1 {
    background-color: brown;
    height: 60px;
    width: 360px;
    text-align: center;
    line-height: 60px;
    color: #fff;
    border-radius: 25px;
    margin: 0 auto;
  }

  .all {
    display: flex;
    justify-content: space-evenly;
    width: 800px;
    margin: 40px auto;

    .goods {
      width: 150px;
      border-radius: 25px;
      background: radial-gradient(
        rgb(228, 243, 203) 10%,
        rgb(206, 221, 150) 70%
      );
      p {
        height: 30px;
        text-align: center;
        line-height: 30px;
        color: #fff;
      }
      h3 {
        color: #fff;
        text-align: center;
      }
    }
    .right {
      width: 250px;
      border-radius: 25px;
      text-align: center;
      background: radial-gradient(
        rgb(235, 191, 191) 10%,
        rgb(230, 152, 152) 70%
      );
      .weight input {
        border: none;
        outline: none;
        border-radius: 10px;
        height: 20px;
        padding-left: 20px;
      }
      button {
        display: inline-block;
        border: none;
        color: #666;
        border-radius: 20px;
        height: 30px;
        background-color: #fff;
        cursor: pointer;
      }
    }
    .right .weight,
    .right .count {
      height: 50px;
      line-height: 50px;
    }
    .right .allPrice {
      height: 90px;
      line-height: 30px;
    }
  }
}
</style>